/**
*@Author 周贞荣
*@Modify 周贞荣
*@Date 2022/3/23 21:02
*@Description 文件功能描述
*/
<template>
    <van-pull-refresh class="wh100" v-model="isLoading" @refresh="onRefresh">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>1</van-swipe-item>
            <van-swipe-item>2</van-swipe-item>
            <van-swipe-item>3</van-swipe-item>
            <van-swipe-item>4</van-swipe-item>
        </van-swipe>
        <div class="bgFF marginH10 marginT20 paddingB30 radius10">
            <div class="paddingT20 paddingB10 flex items-center justify-between paddingH10">
                <span class="font14">我的订单</span>
                <span class="font14 color03">全部订单</span>
            </div>
            <van-grid>
                <van-grid-item icon-color="#f00000" icon="balance-list-o" text="鲜花"/>
                <van-grid-item icon-color="#07c160" icon="todo-list-o" text="永生花"/>
                <van-grid-item icon-color="#1989fa" icon="gift-card-o" text="蛋糕"/>
                <van-grid-item icon-color="#f00000" icon="flower-o" text="礼品"/>
                <van-grid-item icon-color="#f00000" icon="flower-o" text="巧克力"/>
            </van-grid>
        </div>
    </van-pull-refresh>
</template>

<script lang="ts" setup>
    import {ref} from "vue";
    // 正在加载中
    const isLoading = ref(false);
    const count = ref(0);
    const onRefresh = () => {
        setTimeout(() => {
            isLoading.value = false;
            count.value++;
        }, 1000);
    };
</script>

<style scoped>

</style>
<style>
    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
    }
</style>